<template>
	<view :style="viewColor">
		<view class="address-window popup-main bg-f" style="height:90%" :class="display==true?'on':''">
			<view>
				<view class="" style="background-color: #FFFFFF;margin: 10px;border-radius: 10px;padding:0 10px;">
					<view class="popup-header">
						<view class="popup-title">
							{{passengerForm.id? '编辑乘客/游客' : '新增乘客/游客'}}
						</view>
						<view@click.stop="close" class="popup-close1 iconfont icon-ic_close-2 text-24"></view>
					</view>
				    <form >
					<!-- 	<view class="uni-form-item uni-column row-center">
							<view class="title">乘客类型</view>
							<view>
								<radio-group @change="radioChange">
									<label style="margin-right: 12px;">
										<radio :value="1"  checked="true" /><text>成人</text>
									</label>
									<label>
										<radio :value="2" /><text>儿童</text>
									</label>
								</radio-group>
							</view>
						</view> -->
						<view class="uni-form-item uni-column row-center p-form">
							<view class="title">游客姓名</view>
							<view class="p-input">
								<input  class="uni-input"  v-model="passengerForm.name"  name="input" placeholder="请输入姓名" />
							</view>
							
						</view>
						<view class="uni-form-item uni-column row-center p-form" style="height: 50px;line-height: 40px;">
							<view class="title">手机号码</view>
							<view class="p-input">
								<input type="number" maxlength="11" class="uni-input" v-model="passengerForm.phone"  name="input" placeholder="请输入手机号" />
							</view>
						</view>
						<view class="uni-form-item uni-column row-center p-form">
							<view class="title">证件类型</view>
							<view class="p-input">
								<picker class="p-picker" @change="changeType" :value="index" range-key="label"	 :range="typeList">
									<view class="display-flex display-flex-align-center">
										<view >
											<text v-if="cardType" style="color: #000000;">{{cardType}}</text>
											<text v-else style="color: #868686;">请选择证件类型</text>
										</view>
										<view class="iconfont icon-ic_right ml-auto"></view>
									</view>
								</picker>
							</view>
							
						</view>
						<view class="uni-form-item uni-column row-center p-form" style="height:50px;line-height: 40px;">
							<view  v-if="passengerForm.card_type==1"  class="title">身份证号</view>
							<view v-else class="title">证件号码</view>
							<view v-if="passengerForm.card_type==1" class="p-input">
								<input type="idcard"  class="uni-input" v-model="passengerForm.id_card"  name="input" placeholder="请输入身份证号" />
							</view>
							<view v-else class="p-input">
								<input type="text"  class="uni-input" v-model="passengerForm.id_card"  name="input" placeholder="请输入身份证号" />
							</view>
						</view>
						
					</form>
				
				</view>
			
				<view @click="savePassenger" style="border-radius: 20px;height: 40px;line-height: 40px;color: #FFFFFF;margin: 20px;background-color: var(--view-theme);text-align: center;">
					<view>保存</view>
				</view>
			
			</view>
			
		</view>
		<view class='mask' catchtouchmove="true" :hidden='display==false' @tap='close'></view>
	</view>
</template>

<script>

	import {addPassenger} from '@/api/user.js';
	import { mapGetters } from "vuex";
	import util from "@/utils/util.js";

	const CACHE_ADDRESS = {};	
	export default {
		props: {
			display: {
				type: Boolean,
				default: true
			},
			cityShow: {
				type: Number,
				default: 3
			},
			passenger: {
				type: Object ,
				default: ''
			},
		},
		data() {
			return {
				passengerForm: {
					id:'',
					type: 1,
					card_type: 1,
					name: '',
					phone: '',
					id_card:''
				},
				typeList: [
					// 1.身份证2.护照3，台胞证4.港澳通行证5台湾通行证6.港澳居民居住证7.台湾居民居住证8.外国人永久居留身份证9其他
					{
						value: 1,
						label: '身份证',
						
					},
					{
						value: 2,
						label: '护照',
						
					},
					{
						value: 3,
						label: '台胞证',
						
					},
					{
						value: 4,
						label: '港澳通行证',
						
					},
					{
						value: 5,
						label: '台湾通行证',
						
					},
					{
						value: 6,
						label: '港澳居民居住证',
						
					},
					{
						value: 7,
						label: '台湾居民居住证',
						
					},
					{
						value: 8,
						label: '外国人永久居留身份证',
						
					},
					{
						value: 9,
						label: '其他',
						
					},
					
				],
				cardType: ''
				
			};
		},
		computed:{
			...mapGetters(['viewColor']),
		
		},
		watch:{
		
			display(n){
				
			},
			passenger(n){
				if(n) {
					this.passengerForm = n;
				}
			}
		},
		mounted() {
			
		},
		methods: {
			changeType(e){
				console.log('picker发送选择改变，携带值为', e.detail.value)
				
				var day = this.typeList[e.detail.value];
				this.passengerForm.card_type = day.value;
				this.cardType = day.label;
				this.passengerForm.id_card = '';
			},
			close: function() {
				
				this.$emit('changeClose');
			},
			savePassenger:function(){
				console.log(this.passengerForm)
				
				
				if(!this.passengerForm.name){
					return this.$util.Tips({title: "请填写姓名"})
				}
				if(this.passengerForm.name.length < 2){
					return this.$util.Tips({title: "姓名不能小于2个字"})
				}
				if(this.passengerForm.name.length > 32){
					return this.$util.Tips({title: "姓名不能大于32个字"})
				}
				if(!this.passengerForm.phone){
					return this.$util.Tips({title: "请输入手机号"})
				}
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.passengerForm.phone)) return this.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if(this.passengerForm.card_type == 1 && !util.validIdCard(this.passengerForm.id_card)){
					return this.$util.Tips({title: "身份证号不正确"})
				}
				// 小于12岁为儿童
				console.log('util.getAge()',util.getAge(this.passengerForm.id_card))
				if(this.passengerForm.card_type == 1 && util.getAge(this.passengerForm.id_card) < 12){
					this.passengerForm.type = 2;
				}
				console.log('验证通过');
				uni.showLoading({
					title:"请稍后"
				})
				addPassenger(this.passengerForm).then(res => {
					uni.hideLoading();
					this.$util.Tips({
						title: '保存成功'
					});
					this.$emit('changeClose');
					this.passengerForm = {
							id:'',
							type: 1,
							name: '',
							phone: '',
							id_card:''
						}
						
				}).catch(err => {
					uni.hideLoading();
					return this.$util.Tips({
						title: err
					});
				});
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	
	.uni-form-item .title {
		padding-right: 20px;
		font-weight: 700;
	}
	// .address-window .title {
	// 	height: 123rpx;
	// 	line-height: 123rpx;
	// }
	.p-form{
		height: 50px;
		line-height: 50px;
	}
	.p-input{
		flex: 1;
		height: 50px;
		/* line-height: 50px; */
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}
	.p-picker{
		flex: 1;
		height: 50px;
	}
	.address-window .title .iconfont {
		position: absolute;
		right: 28rpx;
		top: 30rpx;
	}
	.address-count{
		.address-selected{
			padding: 0 30rpx;
			margin-top: 10rpx;
			position: relative;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #f7f7f7;
		}
		.selected-list{
			font-size: 26rpx;
			color: #282828;
			line-height: 50rpx;
			padding-bottom: 10rpx;
			padding-left: 60rpx;
			position: relative;
			&.active{
				color: var(--view-theme);
			}
			&:before,&:after{
				content: '';
				display: block;
				position: absolute;			
			}
			&:before{
				width: 4rpx;
				height: 100%;
				background-color: var(--view-theme);
				top: 0;
				left: 10rpx;
			}
			&:after{
				width: 12rpx;
				height: 12rpx;
				background: var(--view-theme);
				border-radius: 100%;
				left: 6rpx;
				top: 50%;
				margin-top: -8rpx;
			}
			&:first-child,&:last-child{
				&:before{
					height: 50%;
				}
			}
			&:first-child{
				&:before{
					top: auto;
					bottom: 0;
				}
			}
			.iconfont{
				font-size: 28rpx;
				float: right;
				color: #dddddd;
			}
		}
		scroll-view{
			height: 550rpx;
		}
		.address-list{
			padding: 0 30rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			.list{
				.iconfont{
					float: right;
					color: #ddd;
					font-size: 28rpx;
				}
				.item-name{
					display: inline-block;
					line-height: 50rpx;
					margin-bottom: 20rpx;
					font-size: 26rpx;
				}
				&.active{
					color: var(--view-theme);
					.iconfont{
						color: var(--view-theme);
					}
				}
			}
		}
	}
</style>
